<!--<template>-->
<!--  <div CLASS="CBL">-->
<!--    <div class="CBL-l">-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--    </div>-->
<!--    <div class="CBL-m">-->
<!--      <div class="item2">1</div>-->
<!--      <div class="item2">2</div>-->
<!--      <div class="item2">3</div>-->
<!--      <div class="item2">4</div>-->
<!--      <div class="item2">5</div>-->
<!--      <div class="item2">6</div>-->
<!--      <div class="item2">7</div>-->
<!--      <div class="item2">8</div>-->
<!--      <div class="item2">9</div>-->
<!--    </div>-->
<!--    <div class="CBL-r">-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--      <div class="item"></div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<template>
  <div class="CBL">
    <div class="CBL-l">
      <div v-for="(item, index) in 99" :key="index" class="item"></div>
    </div>
    <div class="CBL-m">
<!--      <div v-for="(item, index) in 21" :key="index" class="item2">-->
<!--        <span class="num" ref="numElement"></span>-->
<!--      </div>-->
      <div v-for="(mouth, index) in traysData.trayMouths" :key="index" class="item2"
           :class="{ 'in-goods': traysData.trayInGoods[index], 'err-status': traysData.trayErrStatus[index] }">
        <span class="num">{{mouth}}</span>
      </div>
    </div>
    <div class="CBL-r">
      <div v-for="(item, index) in 99" :key="index" class="item"></div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted} from 'vue';

export default defineComponent({
  props: {
    traysData: {
      type: Object,
      required: true,
    },
  
  },

  mounted() {
    onMounted(() => {
      // 执行一些初始化操作
    });
  },
  methods: {

  },
});


</script>

<style scoped lang="scss">
.CBL {

  display: flex;

  .CBL-l,
  .CBL-r {
    width: 40px;
    height: 2119px;
    border: 1px solid lightblue;
    display: grid;
    grid-template-rows: repeat(99, 1fr);

    .item {
      border-bottom: 1px solid lightblue;
      background-color: #265665;
    }
  }

  .CBL-m {
    width: 50px;
    height: 2119px;

    display: grid;
    grid-template-rows: repeat(99, 1fr);
    border-left: 2px solid lightblue;
    border-right: 2px solid lightblue;

    .item2 {
      height: 21.4px;
      background-color: #22c8de;
      text-align: center;
    }
    .num{
      display: inline-block;
      margin-left: 12px;
      transform: rotate(180deg);
    }
    .in-goods {
      background-color: green;
    }

    .err-status {
      background-color: red;
    }
  }
}


</style>